<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>搜索</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../css/style.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="../js/jconfirm/jquery-confirm.min.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/include.js"></script>
</head>
<body>
<div id="header"></div>
<div id="audio"></div>
<div class="main">
    <div class="main-inner">
        <!-- 搜索-->
        <div style="margin-top: 50px;width: 100%;height: 100px;">
            <div class="input-group col-md-6" style="margin-left: 25%">
                <input name="search" type="text" class="form-control" aria-label="Text input with multiple buttons"
                       placeholder="搜索音乐、歌单、用户、歌手" id="searchMsg">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default" id="searchBtn">搜索</button>
                </div>
            </div>
        </div>
        <div>
            <!--按钮-->
            <div class="row show-grid">
                <button class="btn btn-success col-md-1" id="findMusicBtn" onclick="findMusic()">歌曲</button>
                <button class="btn btn-default col-md-1" id="findSingerBtn" style="margin: 0 5px"
                        onclick="findSinger()">歌手
                </button>
                <button class="btn btn-default col-md-1" id="findMusicListBtn" style="margin: 0 5px"
                        onclick="findMusicList()">歌单
                </button>
                <button class="btn btn-default col-md-1" id="findUserBtn" style="margin: 0 5px" onclick="findUser()">
                    用户
                </button>
                <button class="btn btn-default col-md-1" id="findMusicWordBtn" onclick="findMusicWord()">歌词</button>
            </div>
            <!--操作按钮-->
            <!--搜索结果-->
            <div style="margin-top: 20px;height: 500px">
                <table class="table table-striped table-hover" id="result">

                </table>
<!--                <ul class="pagination" id="pageUl"></ul>-->
            </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <form method="post" id="addToNewListForm">
                                <div class="form-group">
                                    <label for="musiclistname" class="control-label">创建歌单</label>
                                    <br>
                                    <input id="mid" name="mid" hidden/>
                                    <input name="musiclistname" type="text" class="form-control" id="musiclistname">
                                </div>
                            </form>
                            <div id="errorMsg" style="color: red;display: none"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" onclick="sub()">创建</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer"></div>

<script src="js/search.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>
<script src="../js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="../js/main.min.js"></script>
<script type="text/javascript">
    function addToNewList(mid){
        console.log("获取到的mid:"+mid);
        $("#mid").val(mid);
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var recipient = button.data('whatever') // Extract info from data-* attributes
            var modal = $(this)
            modal.find('.modal-title').text('New message to ' + recipient)
            modal.find('.modal-body input').val(recipient)
        })
    }
</script>
<script>
    //获取session中输入的值
    if ($("#searchMsg").val() != null) {
        $.post("/music/music/getInput", {}, function (data) {
            console.log("session中输入内容：" + data);
        });
    }
</script>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script>
<script src="//127.0.0.1:35929/livereload.js?snipver=1"></script>
<script>document.addEventListener('LiveReloadDisconnect', function () {
    setTimeout(function () {
        window.location.reload();
    }, 500);
})
</script>
</body>
</html>